<template>
  <div>
    <div class="HeaderBar" style="z-index:99">
      <img class="back" src="../image/back.png" alt="后退" @click="back()">
      <div class="title" v-if="!multiple">{{titleName}}</div>
      <div class="title" v-else>
        <slot></slot>
      </div>
      <div class="refreshImg">
        <slot name="refresh"></slot>
      </div>
      <img v-if="type === 'add' || type === 'more'" class="rightImg" :src="require(`../image/${icon}.png`)"
        @click="event()">
      <div v-if="type === 'save'" class="textOptionValue" @click="textOptionEvent">{{textOption}}</div>
      <div v-if="type==='btn'" class="textOptionValue">
        <slot name="btn"></slot>
      </div>
    </div>
    <div class="box"></div>
  </div>
</template>
<script>
// import Honyar from "@/utils/WebAPI";

export default {
  name: 'HeaderBar',
  props: [
    'titleName',
    'type',
    'icon',
    'textOptionValue',
    'multiple'
  ],
  watch: {
    type: {
      handler (newVal, oldVal) {
        if (newVal !== undefined) {
          this.type_flag = newVal
        }
      },
      immediate: true,
      deep: true
    }
  },
  data () {
    return {
      type_flag: '',
      textOption: '保存'

    }
  },
  methods: {
    textOptionEvent () {
      this.$emit('textOptionEvent')
    },
    back () {
      // if(this.$route.path=='/lockIntercom'){
      //   Honyar.finishActivity()
      // }else{
      //   this.$emit("back");
      // }
      this.$emit('back')
    },
    event () {
      this.$emit('event')
    }
  },
  created () {
    this.hide_more = Number(this.type)
  }
}

</script>
<style lang="scss" scoped>
  @mixin text_limit() {
    vertical-align: middle;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .HeaderBar {
    width: 100%;
    height: 40px;
    background-color: white;
    position: fixed;
    left: 0;
    top: 0;
    // -moz-box-shadow:2px 2px 20px #dfdfdf;
    // -webkit-box-shadow:2px 2px 20px #dfdfdf;
    // box-shadow:2px 2px 20px #dfdfdf;
    // @include switchBoxShadow();
    z-index: 99;
  }

  .box {
    height: 40px;
  }

  .back {
    position: absolute;
    width: 11px;
    height: 19px;
    left: 20px;
    top: calc(50% - 9.5px);
  }

  .title {
    position: absolute;
    width: 280px;
    font-size: 18px;
    font-family: PingFang SC;
    font-weight: 500;
    height: 20px;
    line-height: 20px;
    text-align: center;
    color: #131313;
    left: calc(50% - 140px);
    top: calc(50% - 9px);
    @include text_limit();
  }

  .rightImg {
    position: absolute;
    width: 21.5px;
    height: 20px;
    right: 20px;
    top: calc(50% - 10px);
  }

  .refreshImg {
    position: absolute;
    // width: 20px;
    height: 20px;
    right: 50px;
    top: calc(50% - 10px);
  }

  .textOptionValue {
    position: absolute;
    width: 50px;
    height: 40px;
    text-align: center;
    line-height: 40px;
    right: 20px;
    top: 0;
    font-size: 20px;
    color: $honyarColor;
  }

</style>
